/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Input, Select, Table } from 'antd';
import Wrapper from './wrapper';
import style from './style.css';
import * as actions from '../../actions/categoryAction';

const Option = Select.Option;

@connect((state) => ({
  category: state.admin.category,
}), actions)
export default class extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.getCategory();
    this.props.getHotCategory();
  }

  render() {
    const { category, changeHotRank, changeHotCategory, updateHot } = this.props;

    const { list = [], hot = [] } = category;

    // 构建平级栏目
    let plainCategory = [];
    list.forEach(item => {
      plainCategory.push(item);
      plainCategory = plainCategory.concat(item.subMenu || []);
    });

    const columns = [
      {
        title: '显示顺序',
        dataIndex: 'rank',
        key: 'rank',
        width: 100,
        render: (text, record) => <Input type="number" defaultValue={text}
                                         onBlur={e => changeHotRank(e.target.value, record)} />
      },
      {
        title: '栏目',
        dataIndex: 'url',
        key: 'preview',
        width: 200,
        render: (text, record) => {
          return (
            <Select
              style={{ width: '150px' }}
              showSearch
              placeholder="选择栏目"
              optionFilterProp="children"
              onChange={val => changeHotCategory(val, record)}
              value={record.name}
              onFocus={f => f}
              onBlur={f => f}
              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
            >
            {
              plainCategory.map((item) => {
                if (!item.parent_id) {
                  return (
                    <Option value={item.id} key={`category-${item.id}`}>
                      <p style={{ fontWeight: 800 }}>{item.name}</p>
                    </Option>
                  );
                } else {
                  return (
                    <Option value={item.id} key={`category-${item.id}`}>
                      <p style={{ marginLeft: '15px' }}>{item.name}</p>
                    </Option>
                  );
                }
              })
            }
          </Select>
          );
        }
      },
    ];
    return (
      <Wrapper openKeys="home" selectedKeys="carousel">
        <div className={style.pageTitle}>热点栏目</div>
        <div style={{ margin: '0 0 15px' }}>
          选择首页展示的三个栏目。
        </div>
        <Table
          style={{ width: '300px', border: '1px solid #e5e5e5' }}
          rowKey="id"
          dataSource={hot}
          columns={columns}
          pagination={false}
        />
        <div style={{ margin: '30px 0' }}>
          <Button size="large" type="primary" onClick={updateHot}>更新数据</Button>
        </div>
      </Wrapper>
    );
  }
}
